import { useState } from "react";
import { ClassDemo } from "../classDemo/index.tsx";
import { TsDemo } from "../tsDemo/index.tsx";
import { HtmlDemo } from "../htmlDemo/index.tsx";
import { Button } from "antd";
import { UseStateDemo } from "../useStateDemo/index.tsx";
import {
  UseEffectDemo,
  UseReducerDemo,
  UseSyncExternalStoreDemo,
  UseTransitionDemo,
  UseDeferredValueDemo,
  UseLayoutEffectDemo,
  UseRefDemo,
  UseImperativeHandleDemo,
  UseImperativeHandleDemo2,
  UseContextDemo,
  UseMemoDemo,
  ReactMemoDemo,
  UseCallbackDemo,
  UseDevToolValDemo,
  UseIdDemo,
  UseWaterMarkDemo,
  ADemo,
} from "../hooksDemo";

import Test from "../componentDemo/test";

function AppDemo() {
  const [count, setCount] = useState(0);
  const name = "John  变量使用{}包裹";
  const obj = { a: 11 };
  const fn = () => {
    return "函数用法";
  };

  function changeCount() {
    setCount(count + 1);
  }

  // 列表
  // 列表使用map遍历
  const [currentIndex, setCurrentIndex] = useState(0);
  const list: number[] = [1, 2, 3, 4, 5];
  const [listData, setListData] = useState(list);

  function handleItem(item: number) {
    console.log(item);
  }

  return (
    <>
      <div>
        {"11" /** 字符串用法 */}
        {name /** 变量用法 */}
        {fn() /** 函数用法 */}
        <br />
        {JSON.stringify(obj) /** 对象用法 */}
      </div>

      <br />
      {/* 按钮点击，onClick */}
      <Button type="primary" onClick={changeCount}>
        {count}
      </Button>

      <h2>列表遍历</h2>
      <div>
        {/* 遍历不是{}而是用() */}
        {list.map((item, index) => (
          <div key={index} onClick={() => handleItem(item)}>
            <span>列表{item}</span>
          </div>
        ))}
      </div>

      <h3>if else直接使用不支持</h3>
      <div>
        {count == 3 ? <div>第三次啦</div> : <div>这是第几次点击啦{count}</div>}
      </div>

      <ClassDemo></ClassDemo>
      <TsDemo></TsDemo>
      <HtmlDemo htmlStr={"<h4>传入的字符串</h4>"}></HtmlDemo>
      <UseStateDemo></UseStateDemo>
      <UseReducerDemo></UseReducerDemo>
      <UseSyncExternalStoreDemo></UseSyncExternalStoreDemo>
      <UseTransitionDemo></UseTransitionDemo>
      <UseDeferredValueDemo></UseDeferredValueDemo>
      <UseEffectDemo></UseEffectDemo>
      <UseLayoutEffectDemo></UseLayoutEffectDemo>
      <UseRefDemo></UseRefDemo>
      <UseImperativeHandleDemo></UseImperativeHandleDemo>
      <UseImperativeHandleDemo2></UseImperativeHandleDemo2>
      <UseContextDemo></UseContextDemo>
      <UseMemoDemo></UseMemoDemo>
      <ReactMemoDemo></ReactMemoDemo>
      <UseCallbackDemo></UseCallbackDemo>
      <UseDevToolValDemo></UseDevToolValDemo>
      <UseIdDemo></UseIdDemo>
      <UseWaterMarkDemo></UseWaterMarkDemo>
      <ADemo></ADemo>
      <Test></Test>
    </>
  );
}

export default AppDemo;
